<tm-loading-retry [shouldShowRetry]="hasCoursesLoadingFailed" [message]="'Failed to load courses'" (retryEvent)="loadStudentCourses()">
  <div *tmIsLoading="isCoursesLoading"></div>
  <div *ngIf="!isCoursesLoading">
    <div *ngIf="courses.length === 0; else coursesContainer">
      You are not enrolled in any courses. Please refer to the <a tmRouterLink="/web/student/help">help page</a>
      if you need more information.
    </div>
  </div>
  <ng-template #coursesContainer>
    <div *ngIf="courses.length > 1" class="row mb-2">
      <div class="col-12">
        <div class="float-end">
          <strong class="d-inline"> Sort By: </strong>
          <div class="btn-group">
            <button id="sort-course-id-btn" class="btn btn-light" [disabled]="sortBy === SortBy.COURSE_ID" (click)="sortCoursesBy(SortBy.COURSE_ID)">Course ID</button>
            <button id="sort-course-name-btn" class="btn btn-light" [disabled]="sortBy === SortBy.COURSE_NAME" (click)="sortCoursesBy(SortBy.COURSE_NAME)">Course Name</button>
            <button
              id="sort-course-date-btn"
              class="btn btn-light"
              [disabled]="sortBy === SortBy.COURSE_CREATION_DATE"
              (click)="sortCoursesBy(SortBy.COURSE_CREATION_DATE)"
            >
              Creation Date
            </button>
          </div>
        </div>
      </div>
    </div>
    <ng-container *ngFor="let studentCourse of courses; index as i">
      <div class="card bg-light top-padded">
        <div
          class="card-header bg-primary text-white cursor-pointer"
          *ngIf="studentCourse.course as course"
          (click)="
            studentCourse.isTabExpanded = handleClick($event, studentCourse);
            this.loadFeedbackSessionsForCourse(course.courseId)
          "
        >
          <strong class="text-break">[{{ course.courseId }}]: {{ course.courseName }}</strong>
          <div class="card-header-btn-toolbar">
            <a tmRouterLink="/web/student/course" [queryParams]="{ courseid: course.courseId }"
              id="view-team-btn-{{ i }}" class="btn btn-primary btn-sm button text-nowrap me-2">
              View team
            </a>
            <tm-panel-chevron
              [isExpanded]="studentCourse.isTabExpanded"
            ></tm-panel-chevron>
          </div>
        </div>
        <tm-loading-retry [shouldShowRetry]="studentCourse.hasFeedbackSessionsLoadingFailed"
                          [message]="'Failed to load feedback sessions for the course'"
                          (retryEvent)="loadFeedbackSessionsForCourse(studentCourse.courseId)">
          <div class="table-responsive" *tmIsLoading="studentCourse.isFeedbackSessionsLoading">
            <div *ngIf="studentCourse.isTabExpanded" @collapseAnim>
              <table class="table table-striped table-bordered margin-0" *ngIf="studentCourse.feedbackSessions && studentCourse.feedbackSessions.length">
                <thead>
                  <tr>
                    <th>Session Name</th>
                    <th>Deadline</th>
                    <th>Submissions</th>
                    <th>Responses</th>
                    <th>Action(s)</th>
                  </tr>
                </thead>
                <tbody>
                <tr *ngFor="let session of studentCourse.feedbackSessions; index as i">
                  <ng-container>
                    <td class="text-break">{{ session.session.feedbackSessionName }}</td>
                    <td *ngIf="session.session.submissionEndTimestamp">
                      <span [ngbTooltip]="getSubmissionEndDateTooltip(session)" [ngClass]="{'ngb-tooltip-class' : hasStudentExtension(session.session)}">
                        {{ getSubmissionEndDate(session) }}
                      </span>
                    </td>
                    <td>
                      <span [ngbTooltip]="getSubmissionStatusTooltip(session)" class="ngb-tooltip-class">
                        {{ getSubmissionStatus(session) }}
                      </span>
                    </td>
                    <td>
                      <span [ngbTooltip]="getResponseStatusTooltip(session.isPublished)" class="ngb-tooltip-class">
                        {{ session.isPublished | sessionResponseStatus }}
                      </span>
                    </td>
                    <td class="text-center">
                      <a [ngClass]="{'disabled' : !session.isPublished}"
                        tmRouterLink="/web/student/sessions/result" [queryParams]="{courseid: session.session.courseId, fsname: session.session.feedbackSessionName}"
                        id="view-responses-btn-{{i}}" class="btn btn-light btn-sm btn-margin-right custom-button">
                        View Responses
                      </a>
                      <a *ngIf="session.isWaitingToOpen" id="disabled-start-submit-btn-{{i}}" class="btn btn-light btn-sm disabled">
                        Start Submission
                      </a>
                      <a *ngIf="session.isOpened && !session.isSubmitted"
                        tmRouterLink="/web/student/sessions/submission"
                        [queryParams]="{courseid: session.session.courseId, fsname: session.session.feedbackSessionName}"
                        id="start-submit-btn-{{i}}"
                        class="btn btn-light btn-sm custom-button">
                        Start Submission
                      </a>
                      <a *ngIf="session.isOpened && session.isSubmitted"
                        tmRouterLink="/web/student/sessions/submission"
                        [queryParams]="{courseid: session.session.courseId, fsname: session.session.feedbackSessionName}"
                        id="edit-submit-btn-{{i}}"
                        class="btn btn-light btn-sm custom-button">
                        Edit Submission
                      </a>
                      <a *ngIf="!session.isOpened && !session.isWaitingToOpen"
                        tmRouterLink="/web/student/sessions/submission"
                        [queryParams]="{courseid: session.session.courseId, fsname: session.session.feedbackSessionName}"
                        id="view-submit-btn-{{i}}" class="btn btn-light btn-sm custom-button">
                        View Submission
                      </a>
                    </td>
                  </ng-container>
                </tr>
                </tbody>
              </table>
            </div>
            <table
              class="table table-striped table-bordered margin-0"
              *ngIf="
                !(
                  studentCourse.isFeedbackSessionsLoading ||
                  studentCourse.feedbackSessions.length ||
                  !studentCourse.isTabExpanded
                )
              "
            >
              <tbody>
              <tr>
                <th class="align-center white">
                  Currently, there are no open evaluation/feedback sessions in this course. When a session is open for submission you will be notified.
                </th>
              </tr>
              </tbody>
            </table>
          </div>
        </tm-loading-retry>
      </div>
    </ng-container>
  </ng-template>
</tm-loading-retry>
